<template>

<div>


			<div v-if="isDown">
				<div style="position: fixed;left: 0;top:0;z-index:1010;">
				<div style="box-sizing: border-box;background-color: var(--theme-main-bg-color);width: 100vw;display:flex;align-items: center;justify-content: space-between;font-size: 0.3rem;padding:7px 10px;">

<div style="display:flex;align-items: center;">
	<div @click="close_upload">

<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
					aria-hidden="true" focusable="false" style="color:var(--theme-primary-color);">
					<use xlink:href="/icons/spr.svg#comm_icon_x--svgSprite:all"></use>
				</svg>
</div>
<div>
<img :src="config.domain+config.app_logo" alt="" style="width: 200px;margin-left: 20px;">
</div>
</div>
<div>

	<div @click="godownloadapp" style="background-color:var(--theme-primary-color);color:#fff;border-radius: 5px;font-size: 10px;padding: 5px 10px;">{{$t('h_indexHeader.title9')}}</div>

</div>
</div>

			</div>
			<div style="height: 0.8rem;width:100%;">

			</div>
			</div>

<div class="headerbox">
		
		
		<div class="headerCont"  :style="openMenu?'height:100vh;':'height: var(--theme-header-height);'">
			<div class="jheader">
				<div class="lets">
					<i class="icon-menu" @click="openMenu=!openMenu" :style="openMenu?'transform: rotate(180deg);':''"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
							aria-hidden="true" focusable="false">
							<use xlink:href="/icons/icon.svg#btn_zcl_arrow--sprite"></use>
						</svg></i>
		
					<img class="logo" @click="goIndex" :src="config.domain+config.site_logo" alt="">
				</div>
				<div class="rits">
					<div class="btns" v-if="!userInfo">
						<button @click="openLogin">{{$t('h_indexHeader.title1')}}</button>
						<button @click="openReg">{{$t('h_indexHeader.title2')}}</button>
					</div>
					<div v-else class="userMoney">
						<div class="moneyBox">
							<img src="../assets/images/index/bx.jpg" alt="" style="position: relative;width: 0.3rem;height: 0.3rem;border-radius: 50%;">
							<!-- <i aria-hidden="true" focusable="false" style="display: inline-block; position: relative; width: 0.3rem; height: 0.3rem; background-image: url(/icons/main.png); background-position: -2.79643rem -5.83929rem; background-size: 6.53571rem 6.13929rem;"></i> -->
							<span @click="$router.push('/mine/walletCenter')">{{ userInfo.money }}</span>
							<i class="icon-reload" @click="reloadUserInfo(true)"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#comm_icon_sx--sprite"></use>
								</svg></i> 
							
						</div>
						<div class="goRecharge" @click="gorecharge">
							{{$t('h_indexHeader.title3')}}
						</div>
					</div>
					<i class="icon-search" @click="openSearch"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
							aria-hidden="true" focusable="false">
							<use xlink:href="/icons/icon.svg#comm_icon_ss--sprite"></use>
						</svg></i>
				</div>
			</div>
			
			<div class="menubox">
				<div class="menubox_pub"  v-if="openMenu"  @click="openMenu=!openMenu;is_lang=false;"></div>
				<div class="menubox_main" :style="!openMenu?'left:-100vw;':'left:0;'">
					<div class="navs">
						<div :class="'navs_list ' + (item.id == navIndex?'active':'')" v-for="(item,index) in navs"
							:key="index" @click="changeNav(item)">
							<i v-if="item.id != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425" width="1em"
									height="1em" fill="currentColor" aria-hidden="true" focusable="false">
									<use :xlink:href="'/icons/icon.svg#'+item.key+'--sprite'"></use>
								</svg></i>
							<img v-else :src="'/icons/active/'+item.key+'.png'" />
							<span>{{item.name}}</span>
						</div>
					</div>
					<div class="toulog" @click="mingxi_record">
						<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_sy_zc_tzjl--sprite"></use>
							</svg></i>
						<span>{{$t('h_indexHeader.title4')}}</span>
					</div>
					<div class="market">
						<div class="items" @click="golive">
							<img src="/icons/index/btn_sy_zc_hd.02490a50643aaf4c82eb.png">
							<span>{{$t('h_indexHeader.title5')}}</span>
						</div>
						<!-- <div class="items" @click="gorenwu">
							<img src="/icons/index/btn_sy_zc_rw.cc5ad3f56093a63822b7.png">
							<span>{{$t('h_indexHeader.title6')}}</span>
						</div>
						<div class="items" @click="goFanshui">
							<img src="/icons/index/btn_sy_zc_fs.d9080bec0a9082e74b4d.png">
							<span>{{$t('h_indexHeader.title7')}}</span>
						</div> -->
						<!-- <div class="items" @click="goreward">
							<img src="/icons/index/btn_sy_zc_jl.c1d58b5ba7ada58b76f8.png">
							<span>奖励</span>
						</div> -->
						<div class="items itemsrow" @click="gopromotion"  style="    width: 100%;">
							<img src="/icons/index/btn_sy_zc_tgzq.f4e89529d5469d5b00a6.png">
							<span>{{$t('h_indexHeader.title8')}}</span>
						</div>
					</div>
					<div class="abouts">
						<div class="items" @click="is_lang=true" style="position: relative;">
							<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_sy_zc_lang--sprite"></use>
								</svg></i>
							<span>{{langName}}</span>

							
						</div>
						<div class="items" @click="godownloadapp" v-if="showapp">
							<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_sy_zc_xz--sprite"></use>
								</svg></i>
							<span>{{$t('h_indexHeader.title9')}}</span>
						</div>
						<div class="items" @click="gosevCustomer">
							<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_sy_zc_lxkf--sprite"></use>
								</svg></i>
							<span>{{$t('h_indexHeader.title10')}}</span>
						</div>
						<!-- <div class="items" @click="gosevCustomer">
							<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_sy_zc_cjwt--sprite"></use>
								</svg></i>
							<span>常见问题</span>
						</div> -->
						<div class="items" @click="goabout">
							<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
									aria-hidden="true" focusable="false">
									<use xlink:href="/icons/icon.svg#icon_sy_zc_gywm--sprite"></use>
								</svg></i>
							<span>{{$t('h_indexHeader.title11')}}</span>
						</div>
					</div>
				</div>
			</div>

			<div class="zzccon zzccon1" v-if="is_lang" >
									<div class="zzctext2">{{$t('l_xuanzeyuyan')}}</div>
									<ul>
										<li v-for="(item,index) in langList" @click="switchLang(item.key,item.name)" :key="index">
											<div class="zzcleft">
												<div class="zzctext3">{{item.name}}</div>
											</div>
											<div class="zzcright">
												<div class="Aw1MMVHkyunO1popQHyi l_Nn6lrPLPblbHbiULsf" v-if="item.name == langName">
													<i style="display: inline-flex; justify-content: center; align-items: center;">
														<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor"
															aria-hidden="true" focusable="false">
															<use xlink:href="/icons/icon.svg#music_success--sprite"></use>
														</svg>
													</i>
												</div>
												<div class="Aw1MMVHkyunO1popQHyi" v-else></div>
											</div>
										</li>
									</ul>
							</div>
		</div>
		<alertBox ref="alertBox"></alertBox>
		<newmanbox1 ref="newmanb1" :money="recharge_money" :newmanList="newmanList"></newmanbox1>
	</div>


</div>
	
</template>

<script>
	import alertBox from './alertBox.vue'
	import newmanbox1 from './newmanBox1.vue'
	export default {
		components:{
			alertBox,
			newmanbox1
		},
		props:{
			navIndex:{
				type:Number,
				default:0
			},
			navs:{
				type:Array,
				default:[]
			},
			changeNav:{
				type:Function,
			}
		},
		data() {
			return {
				openMenu:false,
				userInfo:null,
				recharge_money: 0,
				newmanList: [],
				showapp:true,
				config:{},
				isDown:true,
				langName:'',
				langList: [
					// {
					// 	name: '简体中文',
					// 	key: 'cn'
					// },
					{
						name: 'English',
						key: 'en'
					},
					{
						name: 'Português',
						key: 'nl' //葡萄牙语
					},
					// {
					// 	name: 'Việt Nam',
					// 	key: 'vn'  //越南
					// },
					// {
					// 	name: ' عرب . ',
					// 	key: 'al'  //阿拉伯
					// },
					// {
					// 	name: 'भारत',
					// 	key: 'in'  //印度
					// },

				],
				is_lang:false
			}
		},
		mounted() {
			console.log('mount---header')
			console.log('是否需要登录:'+localStorage.getItem('login'))
			if(localStorage.getItem('ISAPP')){
				this.showapp = false
			}
			if(localStorage.getItem('token')){
				this.userInfo = localStorage.getItem('userInfo')
				this.reloadUserInfo()
			}else if(localStorage.getItem('login') == 1){
				console.log('先清楚这个缓存，这次弹窗---')
				// localStorage.removeItem('login')
				this.openLogin()
			}

			if(localStorage.getItem("locale")){
				this.langList.forEach((it,index)=>{
					if(it.key==localStorage.getItem("locale")){
						this.langName=it.name;
					}
				})
			}


			const url = window.location.href;
			console.log(url,'地址栏上')
			// 使用正则表达式匹配URL中的invite_code参数值
			const inviteCode = url.match(/[?&]invite_code=([^&]+)/);

			// 如果匹配成功，提取invite_code的值
			// 还得看看有没有登录
			// localStorage.getItem('token')
			if (inviteCode&&!localStorage.getItem('token')) {
				console.log('有邀请码跳转注册页面')
				this.openReg()
			} else {
				console.log('未找到invite_code参数并且没有登录');
			}
			// this.godownloadapp()
			this.initData()
		},
		methods: {
			initData(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let that = this;
				this.$api.ConfigGetConfig({
					key: 'app_down_url',
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.config=res.data[1].value;
						console.log(this.config,'config')
						// that.$router.push('../../index/downloadapp?url=' + res.data[0].value)
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			switchLang(l,name) {
			  this.$i18n.locale = l;
			  localStorage.setItem("locale",l)
			  this.langName=name
			  this.is_lang=false
			  window.location.reload()
			},
			close_upload(){
					this.isDown=false
					document.documentElement.style.setProperty('--theme-header-height2', '0.8rem');
					
			},
			golive(){
				this.$router.push('../../preferential/live')
			},
			goreward(){
				this.$router.push('../../preferential/reward')
			},
			gorenwu(){
				this.openMenu = false
				this.$parent.$parent.$parent.opennewmanbox()
			},
			goIndex(){
				this.$router.push('/')
			},
			goFanshui(){
				this.$router.push('/preferential/preferential')
			},
			gorecharge(){
				this.$emit('go_recharge')
				// this.$router.push('../../recharge/recharge')
			},
			openLogin(){
				this.$refs.alertBox.openLogin()
			},
			openReg(){
				this.$refs.alertBox.openReg()
			},
			gosevCustomer(){
				this.$router.push('../../index/sevCus')
			},
			goabout(){
				this.$router.push('../../mine/about')
			},
			mingxi_record(){
				this.$router.push('../../mine/mingxi_record')
			},
			gopromotion(){
				this.$router.push('../../mine/promotion')
			},
			godownloadapp(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let that = this;
				this.$api.ConfigGetConfig({
					key: 'app_down_url',
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.config=res.data[1].value;
						
						window.open(res.data[1].value.app_link)
						// that.$router.push('../../index/downloadapp?url=' + res.data[0].value)
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			reloadUserInfo(reload=false){
				const loading = this.$loading({
				    lock: true,
				    text: 'Loading',
				    spinner: 'el-icon-loading',
				    background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload:reload?1:0
				},(res)=>{
					loading.close()
					if(res.code == 0){
						this.userInfo = res.data
						localStorage.setItem('userInfo',JSON.stringify(res.data))
						if(localStorage.getItem('first') == 1){
							localStorage.setItem('first',2)
							// this.getNewTask()
						}
					}else{
						// this.$message.error(res.msg);
					}
				})
			},
			getNewTask(){
				const loading = this.$loading({
				    lock: true,
				    text: 'Loading',
				    spinner: 'el-icon-loading',
				    background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.newTask({},(res)=>{
					loading.close();
					if(res.code == 0){
						this.recharge_money=res.data.allMoney;
						this.newmanList=res.data.list;
						this.$nextTick(() => {
							this.$refs.newmanb1.openForget()
						})
					}else{
						if(res.code != 201){
							// this.$message.error(res.msg);
						}
					}
				})
			},
			openSearch(){
				this.$router.push('../../index/search')
			}
		}
	}
</script>

<style lang="less" scoped>
.zzccon1{
	position: absolute !important;
	left: 3rem;
	top: 100vw;
	z-index: 99;
	width: 30%;
}
	.headerbox {
		position: relative;
		height: var(--theme-header-height);
		margin-top: constant(safe-area-inset-top);
		margin-top: env(safe-area-inset-top);  
	}
	.headerCont{
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1010;
		display: flex;
		flex-direction: column;
	}

	.menubox {
		overflow-y: scroll;
		flex: 1;
		

		&_pub {
			position: absolute;
			width: 100vw;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}

		&_main {
			transition: all 1s;
			width: 3rem;
			position: relative;
			z-index: 1;
			height: 100%;
			background: var(--theme-side-menu-bg-color);
			overflow-y: scroll;
			transition: all .5s;
			left: 0;
			.navs {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin: .1rem;
				flex-direction: row;
				justify-content: space-between;

				.active {
					background-color: var(--theme-primary-color);

					span {
						color: var(--theme-primary-font-color);
					}
				}
			}

			.navs_list {
				border-radius: 0.14rem;
				cursor: pointer;
				font-size: .2rem;
				height: 0.9rem;
				max-width: 1.3rem;
				min-width: 1.3rem;
				width: 1.3rem;
				background: var(--theme-side-menu-btn-color);
				margin: .06rem 0;
				padding-top: .06rem;

				.icons {
					width: 0.5rem;
					height: 0.38rem;
					font-size: .44rem;
					display: block;
					margin: 0 auto;
					color: var(--theme-text-color);
					text-align: center;
				}

				img {
					display: block;
					margin: 0 auto;
					height: 0.38rem;
					width: 0.5rem;
					color: var(--theme-text-color);
				}

				span {
					color: var(--theme-text-color);
					text-align: center;
					display: block;
					padding-top: .1rem;
				}
			}
			.navs .navs_list:last-child{
				img{
					width: 0.35rem;
					height: 0.45rem;
				}
				span {
					padding-top: 0;
				}
			}

			.toulog {
				background-color: var(--theme-side-menu-btn-color);
				border-radius: 0.1rem;
				color: var(--theme-text-color);
				cursor: pointer;
				font-size: .2rem;
				height: 0.6rem;
				width: 100%;
				font-size: .24rem;
				height: 0.75rem;
				display: flex;
				align-items: center;

				.icons {
					font-size: .5rem;
					height: .5rem;
					margin: 0 0 0 .3rem;
					color: var(--theme-text-color);
				}

				span {
					color: var(--theme-text-color);
					font-size: .24rem;
					display: block;
					flex: 1;
					text-align: center;
				}
			}

			.market {
				display: flex;
				    flex-wrap: wrap;
				    margin: 0.16rem;
				    flex-direction: row;
				    justify-content: space-between;
				
				.items{
					cursor: pointer;
					margin-bottom: 0.1rem;
					width: 1.2rem;
					height: 0.8rem;
					position: relative;
					img {
						height: 0.8rem;
						position: absolute;
						z-index: 1;
					}
					span {
						font-size: .2rem;
						left: 0.08rem;
						max-width: 0.7rem;
						top: 0.08rem;
						word-wrap: break-word;
						color: var(--theme-text-color-darken);
						display: inline-block;
						position: absolute;
						z-index: 2;
					}
				}
				.itemsrow{
					span{
						width:100%;
						max-width:unset;
						line-height: .8rem;
						top: 0;
						padding-left: .3rem;
					}
				}
			}
			
			.abouts{
				padding:.1rem .3rem;
				.items{
					cursor: pointer;
					font-size: .22rem;
					height: 0.6rem;
					display: flex;
					align-items: center;
					margin-bottom: .1rem;
					i{
						align-items: center;
						background: var(--theme-text-color-lighten);
						border-radius: 50%;
						font-size: .4rem;
						display: block;
						width: .4rem;
						height: .4rem;
						color: var(--theme-side-menu-bg-color);
					}
					span{
						color: var(--theme-text-color-lighten);
						font-size: .22rem;
						margin-left:.2rem;
					}
				}
			}

		}
	}

	.jheader {
		width: 100%;
		background-color: var(--theme-main-bg-color);
		// border-top: 0.01rem solid var(--theme-color-line);
		border-bottom: 0.01rem solid var(--theme-color-line);
		height: var(--theme-header-height);
		line-height: normal;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;

		.lets {
			padding-left: .1rem;
			display: flex;
			align-items: center;
			display: flex;
			
			.icon-menu {
				transition: all .1s;
				color: var(--theme-mine-icon-color);
				font-size: .46rem;
				margin: 0 .1rem;
				display: flex;
				align-items: center;
			}

			.logo {
				height: .65rem;
				margin-left: 0.3rem;
			}
		}

		.rits {
			padding-right: .1rem;
			display: flex;
			align-items: center;

			.btns {
				display: flex;
				align-items: center;

				button {
					background-color: var(--theme-primary-color);
					border: 1px solid var(--theme-primary-color);
					color: var(--theme-primary-font-color);
					border-radius: 0.1rem;
					height: 0.4rem;
					line-height: 1;
					max-width: 1.2rem;
					white-space: pre-wrap;
					margin: 0 .1rem;
					padding: 0 0.15rem;
					font-size: .22rem;

					&:last-child {
						background-color: unset;
						color: var(--theme-primary-color);
					}
				}
			}
			
			.userMoney{
				
				display: flex;
				align-items: center;
				
				.moneyBox{
					border-radius: .4rem;
					border: 0.01rem solid var(--theme-color-line);
					margin-right: .2rem;
					display: flex;
					align-items: center;
					i{
						&:first-child{
							border-radius: 50%;
							border: .01rem solid var(--theme-secondary-color-finance);
						}
					}
					span{
						color: var(--theme-secondary-color-finance);
						font-size: .26rem;
						text-decoration: underline;
						margin: 0 .16rem;
					}
					.icon-reload{
						color: var(--theme-primary-color);
						font-size: .36rem;
						display: flex;
					}
				}
				
				.goRecharge{
					background-color: var(--theme-primary-color);
					border-color: var(--theme-primary-color);
					border-radius: 0.1rem;
					height: 0.4rem;
					line-height: 0.4rem;
					margin-left: 0.1rem;
					min-width: 0.8rem;
					padding: 0;
					color: #fff;
					text-shadow: none;
					font-size: .18rem;
					text-align: center;
				}
			}
			
			

			.icon-search {
				color: var(--theme-text-color);
				font-size: 0.42rem;
				line-height: .36rem;
				display: block;
			}
		}
	}
</style>